<template>
  <div class="rank-list" v-if="listName">
    <infinity-scroll :animate-key="listName" :speed="speed">
      <slot slot="tmp">
        <div>
          <RankItem v-for="(item, index) of list" :index="index + 1" :key="index" :data="item">
            <template slot="name" slot-scope="scope">
              <slot name="name" v-bind:item="scope.item"></slot>
            </template>
          </RankItem>
        </div>
      </slot>
    </infinity-scroll>
  </div>
</template>

<script>
import RankItem from './RankItem.vue'
import infinityScroll from '@/components/infinityScroll'
export default {
  name: 'Rank',
  components: {
    RankItem,
    infinityScroll
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    listName: {
      type: String,
      default: ""
    },
    speed: {
      type: Number,
      default: 16
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    if (!this.listName)
      throw Error('请传入listName')
  },
  methods: {

  }
}
</script>

<style lang="scss">
.rank-list {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
</style>